<template>
  <div class="food-wrap">

    <div class="food-box">
      <span class="title">食宿说明：</span>
      <div class="food-con">
        <textarea class="food" v-model="food" placeholder="请用简短文字说明食宿条件~" maxlength="280"></textarea>
      </div>
    </div>

    <div class="btn-box">
      <button type="button" class="btn" @click="saveFood">保&nbsp;存</button>
    </div>

  </div>
</template>

<script>
  import {getSessionStore, setSessionStore} from "../../../config/util";

  export default {
    data() {
      return {
        food: "",
        mechanismId: this.$route.query.mechanismId,
        mechanismName: this.$route.query.mechanismName,
        type: this.$route.query.type,
        workId: this.$route.query.workId,
      }
    },
    mounted() {
      let text = getSessionStore("foodExplain");//处理textarea格式换行
      if (text) {
        let str = "";
        let textList = text.replace(/<p>/gm, "").split("</p>");
        for (let i = 0, length = textList.length; i < length; i++) {
          if (textList[i]) {
            str += `${textList[i]}\r`;
          }
        }
        this.food = str;
      }
    },
    methods: {
      saveFood() {
        if (this.food.indexOf("\n") != -1) {//格式处理
          let str = "";
          let itemList = this.food.replace(/\n/gm, ";").split(";");
          for (let i = 0, length = itemList.length; i < length; i++) {
            if (itemList[i]) {
              str += `<p>${itemList[i]}</p>`;
            }
          }
          setSessionStore("foodExplain", str);
        } else {
          let text = getSessionStore("foodExplain");
          if (!text) {
            if (this.food) {
              setSessionStore("foodExplain", `<p>${this.food}</p>`);
            }
          }
        }

        if (this.type == 1) {
          this.$router.push({
            path: "/workedit",
            query: {"mechanismId": this.mechanismId, "mechanismName": this.mechanismName, "type": 1}
          });
        } else {
          this.$router.push({
            path: "/workedit",
            query: {"workId": this.workId, "type": 2, "flag": 1}
          });
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .food-wrap {
    .wh(100%, 100%);
    background: @talent-bg-color;
    overflow: hidden;
    .food-box {
      display: flex;
      flex-direction: column;
      .wh(100%, 4.48rem);
      .title {
        margin-top: 0.453rem;
        margin-left: 0.32rem;
        .size-color(0.427rem, rgba(51, 51, 51, 1));
      }
      .food-con {
        margin: 0.32rem auto 0;
        .wh(9.36rem, 2.907rem);
        background: rgba(245, 245, 245, 1);
        .border-radius(0.08rem);
        .food {
          .wh(9.04rem, 2.578rem);
          padding-left: 0.32rem;
          padding-top: 0.32rem;
          .size-color(0.373rem, rgba(51, 51, 51, 1));
          background: rgba(245, 245, 245, 1);
          border: none;
          resize: none;
        }
      }
    }
    .btn-box {
      padding-top: 0.8rem;
      text-align: center;
      .wh(100%, 1.173rem);
      .btn {
        .wh(7.2rem, 1.173rem);
        background: @talent-button-color;
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
    }
  }
</style>
